import { useTranslation } from 'react-i18next';
import { motion } from 'framer-motion';

export function ServicesSection() {
  const { t } = useTranslation();
  
  // Service data
  const services = [
    {
      title: t('services.onlinePayment'),
      description: t('services.onlinePaymentDesc'),
      icon: 'fa-credit-card',
      color: 'from-blue-500 to-blue-600'
    },
    {
      title: t('services.inStorePayment'),
      description: t('services.inStorePaymentDesc'),
      icon: 'fa-shopping-cart',
      color: 'from-green-500 to-green-600'
    },
    {
      title: t('services.crossBorder'),
      description: t('services.crossBorderDesc'),
      icon: 'fa-globe',
      color: 'from-purple-500 to-purple-600'
    },
    {
      title: t('services.mobilePayment'),
      description: t('services.mobilePaymentDesc'),
      icon: 'fa-mobile-alt',
      color: 'from-amber-500 to-amber-600'
    }
  ];

  return (
    <section id="services" className="py-20 bg-white">
      <div className="container mx-auto px-4">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            viewport={{ once: true }}
            className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
          >
            {t('services.title')}
          </motion.h2>
          <div className="w-20 h-1 bg-blue-500 mx-auto rounded-full"></div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {services.map((service, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              viewport={{ once: true }}
              className="bg-white rounded-xl shadow-lg p-6 transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
            >
              <div className={`w-14 h-14 rounded-full bg-gradient-to-br ${service.color} flex items-center justify-center text-white text-2xl mb-6`}>
                <i className={`fa-solid ${service.icon}`}></i>
              </div>
              <h3 className="text-xl font-semibold text-gray-900 mb-3">{service.title}</h3>
              <p className="text-gray-600">{service.description}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}